<template>
  <div class="home">
    <a-list
      class="list-demo-action-layout"
      :bordered="false"
      :data="dataList"
      :pagination-props="{
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total: total,
      }"
      @page-change="onPageChange"
    >
      <template #item="{ item }">
        <a-list-item class="list-demo-item" action-layout="vertical">
          <template #actions>
            <span
              ><icon-heart @click="addThumb(item.id)" />{{
                item.thumbNum
              }}</span
            >
            <span
              ><icon-star @click="addFavour(item.id)" />{{
                item.favourNum
              }}</span
            >
            <span><icon-eye @click="toArticlePage(item.id)" />saw</span>
          </template>
          <template #extra>
            <div className="image-area">
              <img alt="arco-design" :src="item.withPicture" />
            </div>
          </template>
          <a-list-item-meta :title="item.title" :description="item.description">
            <template #avatar>
              <a-avatar shape="square">
                <img alt="avatar" :src="item.user.userAvatar" />
              </a-avatar>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watchEffect } from "vue";
import { IconStar, IconHeart, IconEye } from "@arco-design/web-vue/es/icon";
import {
  PostControllerService,
  PostFavourAddRequest,
  PostFavourControllerService,
  PostThumbAddRequest,
  PostThumbControllerService,
  Question,
} from "../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";

// const names = ["Socrates", "Balzac", "Plato"];
// const avatarSrc = [
//   "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
//   "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp",
//   "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp",
// ];
// const imageSrc = [
//   "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/29c1f9d7d17c503c5d7bf4e538cb7c4f.png~tplv-uwbnlip3yd-webp.webp",
//   "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/04d7bc31dd67dcdf380bc3f6aa07599f.png~tplv-uwbnlip3yd-webp.webp",
//   "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/1f61854a849a076318ed527c8fca1bbf.png~tplv-uwbnlip3yd-webp.webp",
// ];
// const dataSource = new Array(15).fill(null).map((_, index) => {
//   return {
//     index: index,
//     avatar: avatarSrc[index % avatarSrc.length],
//     title: names[index % names.length],
//     description:
//       "Beijing ByteDance Technology Co., Ltd. is an enterprise located in China. ByteDance has products such as TikTok, Toutiao, volcano video and Douyin (the Chinese version of TikTok).",
//     imageSrc: imageSrc[index % imageSrc.length],
//   };
// });

const dataList = ref([]);
const total = ref(1);
const searchParams = ref({
  pageSize: 2,
  current: 1,
});

const loadData = async () => {
  const res = await PostControllerService.listPostVoByPageUsingPost(
    searchParams.value
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败" + res.message);
  }
};
const addThumb = async (id: PostThumbAddRequest) => {
  const res = await PostThumbControllerService.doThumbUsingPost({
    postId: id,
  });
  if (res.code === 0) {
    if (res.data === -1) {
      message.info("取消点赞成功");
    } else {
      message.success("点赞成功");
    }
    loadData();
  } else {
    message.error("点赞失败" + res.message);
  }
};
const addFavour = async (id: PostFavourAddRequest) => {
  const res = await PostFavourControllerService.doPostFavourUsingPost({
    postId: id,
  });
  if (res.code === 0) {
    if (res.data === -1) {
      message.info("取消收藏成功");
    } else {
      message.success("收藏成功");
    }
    loadData();
  } else {
    message.error("收藏失败" + res.message);
  }
};
const router = useRouter();
const toArticlePage = (id: number) => {
  router.push({
    path: `/view/article/${id}`,
  });
};

watchEffect(() => {
  loadData();
});
onMounted(() => {
  loadData();
});

const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};
</script>

<style scoped>
.list-demo-action-layout .image-area {
  width: 183px;
  height: 119px;
  border-radius: 2px;
  overflow: hidden;
}

.list-demo-action-layout .list-demo-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}
</style>
